<template>
  <div>
    <div class="container">
        <div class="handle-box">
            <el-input v-model="jobName" placeholder="任务名称查询" class="handle-input mr10"></el-input>
            <el-button type="primary" @click="Show()">查询</el-button>
            <el-button @click="NewJob" type="primary">新建任务</el-button>
            <el-button @click="suspendJob" type="success">暂停任务</el-button>
            <el-button @click="StatcTrigger" type="warning">开启任务</el-button>
            <!-- <el-button @click="revoerJob" type="primary">恢复任务</el-button> -->
            <el-button @click="deleteJob" type="danger">删除任务</el-button>
            
            <!-- <el-popover width="160" v-model="visibles">
              <p>这将会将全部Job状态设为停用,但不会影响它们的实际运行</p>
              <p>(适用于程序初开矫正用)</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="visibles = false">取消</el-button>
                <el-button type="primary" @click="CorrectJob" size="mini">确定</el-button>
              </div>
              <el-button slot="reference">刷新数据</el-button>
            </el-popover> -->
        </div>
        <el-row>
            <el-col :span="24">
              <!--定时任务列表-->
              <el-table ref="multipleTable" :data="TimingList" tooltip-effect="dark" style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column prop="jobName" label="作业名称" width="120">
                </el-table-column>
                <el-table-column prop="jobGroup" label="分组名称" width="120">
                </el-table-column>
                <el-table-column prop="cron" label="时间策略(CRON/Simple)" width="">
                  <template slot-scope="scope">
                    <p v-if="scope.row.yun"
                      v-html='scope.row.triggerType == "Cron" ? "Cron:" + scope.row.cron : "Simple:<br>执行间隔:" + scope.row.intervalSecond + "<br>一直执行"'>
                    </p>
                    <p v-else
                      v-html='scope.row.triggerType == "Cron" ? "Cron:" + scope.row.cron : "Simple:<br>执行间隔:" + scope.row.intervalSecond + "秒<br>执行" + scope.row.rumTimes + "次"'>
                    </p>

                  </template>
                </el-table-column>
                <el-table-column prop="name" label="状态" width="120">
                  <template slot-scope="scope">
                    <el-button v-if="scope.row.zt == 1" type="success" plain>启用</el-button>
                    <el-button v-else-if="scope.row.zt == 0" type="danger" plain>停用</el-button>
                    <el-button v-else type="warning" plain>暂停</el-button>

                  </template>
                </el-table-column>
                <el-table-column prop="description" label="任务描述" width="120">
                </el-table-column>
                <el-table-column prop="requestUrl" label="任务地址" width="">
                </el-table-column>
                <el-table-column prop="endTime" label="最近一次执行时间" width="160">
                </el-table-column>
                <!-- <el-table-column prop="name" label="操作" width="240">
                  <template>
                    <el-button type="info" round>查看历史日志</el-button>
                  </template>
                </el-table-column> -->
              </el-table>

              <!--分页-->
              <div class="pagination">
                <el-pagination 
                  @size-change="handleSizeChange" 
                  @current-change="handleCurrentChange" 
                  :current-page="Pindex"
                  :page-sizes="[10, 20, 40, 80]" 
                  :page-size="Psize" 
                  layout="total, sizes, prev, pager, next,jumper" 
                  :total="Count">
                </el-pagination>
              </div>
            </el-col>
        </el-row>
    </div>

    <el-dialog title="新建任务" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item prop="JobName" label="任务名称:" :label-width="formLabelWidth">
          <el-input v-model="form.JobName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="JobGroup" label="分组名称:" :label-width="formLabelWidth">
          <el-input v-model="form.JobGroup" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="任务地址" :label-width="formLabelWidth">
          <el-select v-model="form.RequestUrl" placeholder="请选择" style="width:100%">
            <el-option v-for="item in JobNameList" :key="item.namespace" :label="item.namespace"
              :value="item.namespace">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" :label-width="formLabelWidth">
          <el-date-picker v-model="form.BeginTime" type="datetime" placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" :label-width="formLabelWidth">
          <el-date-picker v-model="form.EndTime" type="datetime" placeholder="选择日期时间" align="right">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="时间策略" :label-width="formLabelWidth">
          <el-select v-model="form.TriggerType" placeholder="请选择">
            <el-option label="Cron" value="Cron"> </el-option>
            <el-option label="Simple" value="Simple"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.TriggerType == 'Cron'" label="Cron字符串:" :label-width="formLabelWidth">
          <el-input v-model="form.Cron" autocomplete="off"></el-input>
          <el-link @click="Tiao" type="primary">CRON生成网址</el-link>
        </el-form-item>
        <el-form-item v-if="form.TriggerType == 'Simple'" label="执行次数:" :label-width="formLabelWidth">
          <el-input-number v-if="!form.Yun" v-model="form.RumTimes" :min="1" label="运行次数"></el-input-number>
          <el-switch v-model="form.Yun" active-text="一直运行" inactive-text="按策略运行">
          </el-switch>
        </el-form-item>
        <el-form-item v-if="form.TriggerType == 'Simple'" label="间隔时间/秒:" :label-width="formLabelWidth">
          <el-input v-model="form.IntervalSecond" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述:" :label-width="formLabelWidth">
          <el-input v-model="form.Description" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="NewJobSuccess">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { CorrectJob, getTiming, deleteTiming, addTiming, StartJob, SuspendJob, RecoverJob, AfterRouting } from "@/api/Timing"
export default {
  data() {
    return {
      TimingList: [],
      multipleSelection: [], //选中的行
      visible: false,
      visibles: false,
      formLabelWidth: "120px",
      dialogFormVisible: false,
      JobNameList: {},
      form: {
        JobName: null,
        JobGroup: null,
        RequestUrl: null,
        RequestTypeEnum: 0,
        BeginTime: null,
        EndTime: null,
        TriggerType: "Cron",
        Cron: null,
        RumTimes: 0,
        IntervalSecond: null,
        Description: null,
        Yun: false,
      },
      rules: {
        JobName: [
          { required: true, message: '请输入任务名称', trigger: 'blur' }

        ],
        JobGroup: [
          { required: true, message: '请输入任务分组名称', trigger: 'blur' }

        ],
      },
      Pindex: 1,
      Psize: 10,
      Count: 0,
      jobName:''
    };

  },
  mounted() {
    this.dd();
  },
  methods: {
    async dd() {
      await this.Show();
      await this.GetTaskName();
    },//先锋
    CorrectJob() {
      this.visibles = false;
      this.Correct();
    },
    Correct() {
      CorrectJob().then((res) => {
        if (res.data) {
          this.$message.success(res.msg);
          this.Show();
        }
        else {
          this.$message.error("或许不需要刷新")
        }

      });
    },
    suspendJob() {
      let data = {
        JobName: this.multipleSelection[0].jobName,
        JobGroup: this.multipleSelection[0].jobGroup,
        JobId: this.multipleSelection[0].id
      }
      SuspendJob(data).then((res) => {
        this.$message.success(res.msg);
        if (res.code == 200)
          this.Show();
      })
    },//暂停Job任务
    async Show() {
      let data = {
        Pindex: this.Pindex,
        Psize: this.Psize
      }
      await getTiming(data)
        .then((res) => {
          console.log("data", res);
          this.TimingList = res.data;
          this.Count = res.count
        });
    }, //Timing数据获取
    handleSelectionChange(val) {
      this.multipleSelection = val;

    }, //选中行赋值
    deleteJob() {
      let id = this.GetId();
      deleteTiming({ id })
        .then((res) => {
          this.$message.success(res.msg);
          if (res.code == 200)
            this.Show();
        });
      this.visible = false;
    }, //删除单个任务Job
    GetId() {
      var dd = this.multipleSelection[0].id;
      return dd.toString();
    }, //获取ID
    NewJob() {
      this.dialogFormVisible = true;
    }, //新建Job创建
    NewJobSuccess() {
      this.$refs['form'].validate((valid) => {
          //验证通过则添加
          if (valid) {
            this.dialogFormVisible = false;
            var data = this.form;
            addTiming(data).then((res) => {
              this.$message.success(res.msg);
              if (res.code == 200)
                this.Show();
            })
          } else {
            console.log('数据验证失败，请重新填写！');
            return false;
          }
        });
      
    }, //确认新建Job任务
    async GetTaskName() {
      await this.$ajax
      AfterRouting().then((res) => {
        this.JobNameList = res;
      });

    }, //获取全部的Job任务名称
    Tiao() {
      window.open("https://cron.qqe2.com/", "Cron");
    },//跳转Cron生成器页面
    StatcTrigger() {
      var data = this.multipleSelection[0];
      StartJob(data).then((res) => {
        console.log("assas", res);
        this.$message.success(res.msg)
        if (res.code == 200)
          this.Show();
      })
    },//启动定时任务
    recoverJob() {
      let data = {
        JobName: this.multipleSelection[0].jobName,
        JobGroup: this.multipleSelection[0].jobGroup,
        JobId: this.multipleSelection[0].id
      }
      RecoverJob(data).then((res) => {
        this.$message.success(res.msg);
        if (res.code == 200)
          this.Show();

      })
    },//恢复任务
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.Psize = val;

      this.Show();
    },//页容量变动
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.Pindex = val;
      this.Show();
    },//页码变动

  },
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
